@(user: User, sheets: List[com.smartsheet.api.models.Sheet], indexes: List[apis.IDOL.Index], operations: List[utils.Operation])

@main(user) {

	<!-- display flash message if exists -->
    <div id="alert">
	@if(play.mvc.Controller.flash("alert") != null) {
		<div class="alert  alert-dismissable alert-@play.mvc.Controller.flash("alert")">
	  		<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
	  		@play.mvc.Controller.flash("msg")
		</div>
	}
	</div>

	<section class="content">
		<form role="form" class="form-horizontal" method="GET" action="/process">

    		@if(sheets.size > 0) {
				<div class="form-group">
					<label for="sheet" class="col-sm-2 control-label">Sheet</label>
					<div class="col-md-8 col-sm-8">
						<select id="sheet" class="form-control" name="sheetId">
							@for(sh <- sheets) {
				                <option value="@sh.getId()">@sh.getName()</option>
			            	}
						</select>
					</div>
				</div>
			}
    		@if(indexes.size > 0) {
				<div class="form-group">
					<label for="index" class="col-sm-2 control-label">Index</label>
					<div class="col-md-8 col-sm-8">
						<select ind="index" class="form-control" name="index">
							@for(index <- indexes) {
				                <option value="@index.index">@index.index</option>
			            	}
						</select>
					</div>
				</div>
			}
    		@if(operations.size > 0) {
				<div class="form-group">
					<label for="operation" class="col-sm-2 control-label">Operation</label>
					<div class="col-md-8 col-sm-8 col-xs-6">
						<select id="operation" class="form-control" name="operation">
							@for(operation <- operations) {
				                <option value="@operation.name()">@operation.display</option>
			            	}
						</select>
					</div>
				</div>
			}

			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-8">
					<button type="submit" class="btn btn-primary">Process</button>
				</div>
			</div>
			
			<hr>
			
			<div class="row">
				<input id="columns" type="hidden" name="columns"/>
				<div class="col-md-offset=1 col-sm-offset-1">
					<p class="help-block">Select columns to process</p>
					<div id="rowtable">
					</div>
				</div>
			</div>

		</form>

	</section>	<!-- section -->
	
	<script type="text/javascript">

		$(document).ready(function() {
		
			// mouse enter/leave handler on cell td
			$(document).on('mouseenter', 'td.column, th.column', function() {
				var pos = $(this).attr("pos");
				//console.log('enter: '+pos);
				$(".col"+pos).addClass("success");
			});

			$(document).on('mouseleave', 'td.column, th.column', function() {
				var pos = $(this).attr("pos");
				//console.log('leave: '+pos);
				$(".col"+pos).removeClass("success");
			});

			var columnSet = new Set();
			$(document).on('click', 'td.column, th.column', function() {
				var pos = $(this).attr("pos");
				$(".col"+pos).toggleClass("danger");
				if ($("th.col"+pos).hasClass("danger")) {	// show badge
					columnSet.add(pos);
				} else {	// hide badge
					columnSet.delete(pos);
				}
				var indexes = [];
				columnSet.forEach(function(item) {
					indexes.push(item);
				});
				indexes = indexes.sort();
				console.log('selected columns: '+indexes.toString());
				$('#columns').val(indexes.toString());
			});
			
			// when attachment is selected from the list, move the checkbox selection
			$(document).on('change', 'select[name=sheetId]', function() {
				// this is the element that evevt was received
				var sheetId = $(this).val();	// also $('select[name=sheetId]').val() works
				
				// clear selected columns
				columnSet.clear();
				$('#columns').val('');
				// get sheet data, fetch 5 rows data
				getSheetData(sheetId);
			});
			
			$('.form-horizontal').submit(function(e) {
			  	if (columnSet.size === 0) {
			  		// cancel submit
			  		e.preventDefault();
			  		setFlash('warning', 'No column is selected, please select columns to process');
			  		return false;
				}
				columnSet.clear();
			});
			
			// get sheet data of current sheet, and draw row table
			getSheetData($('select[name=sheetId]').val());
		});
	</script>
}